<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :labelCol="{ style: 'width:70px' }">
        <a-row :gutter="48" style="margin:0px;">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="车间">
              <j-dict-select-tag
                type="list"
                v-model="queryParam.workshop"
                dictCode="data_workshop,workshop_name,workshop_id"
                placeholder="请选择车间"
              />
            </a-form-item>
          </a-col>
          <!-- 
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="工区">
                  <j-dict-select-tag type="list" v-model="queryParam.areaId" dictCode="data_area,area_name,area_id" placeholder="请选择工区" />
              </a-form-item>
          </a-col> -->
          <a-col :md="6" :sm="24">
            <a-form-item label="采样属性">
              <j-dict-select-tag
                type="list"
                v-model="queryParam.property"
                dictCode="data_property where status = 1 and prop_type = '日报',prop_name,prop_no"
                placeholder="请选择属性名称"
                @change="peopertyChanage"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="11" :md="12" :sm="24">
            <a-form-item label="采样范围">
              <a-range-picker v-model="queryParam.startEndDate" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="区间">
               <a-input  v-model="queryParam.ranges"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <span
              class="table-page-search-submitButtons"
              :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
            >
              <a-button type="primary" @click="handleSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-spin :spinning="loading">
        <a-row :gutter="[24, 8]" style="margin:0px;">
          <a-col :span="8">
            <a-card>
              <a-table
                ref="table"
                size="middle"
                bordered
                rowKey="id"
                class="j-table-force-nowrap"
                :scroll="{ x: true }"
                :columns="columns"
                :dataSource="barData2" 
                :loading="loading" 
                :pagination="false"
              >
              </a-table>
            </a-card>
          </a-col>
          <a-col :span="16">
            <a-card>
              <pie title="" :height="height"  :key="new Date().getTime()" :dataSource="dataList" />
            </a-card>
          </a-col>
        </a-row> 
    </a-spin> 
  </a-card>
</template>

<script>
import Bar from '@/components/chart/Bar'
import BarMultid from '@/components/chart/BarMultid'
import Pie from '@/components/chart/Pie'
import LineChartMultid from '@/components/chart/LineChartMultid'
import TransferBar from '@/components/chart/TransferBar'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import AInput from 'ant-design-vue/es/input/Input'
import moment from 'moment'
import axios from 'axios'
import { httpAction, getAction } from '@/api/manage'

export default {
  name: 'TableList',
  components: {
    Bar,
    BarMultid,
    LineChartMultid,
    Pie,
    TransferBar,
    AInput,
    ATextarea,
  },
  data() {
    return {
      height: 567, //document.body.clientHeight - 357,
      barData: [],
      barData2: [],
      lineData: [],
      countSource: [
        { item: 'a', count: 10 },
        { item: 'b', count: 20 },
      ],
      fields: ['电压'],
      dataList: [],
      visibleCreateModal: false,
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      form: null,
      mdl: {},

      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        workshop: '', //车间
        property: '', //采样属性
        startDate: '', //
        endDate: '', //
        ranges: '0,3,5,8',
      },
      // 表头
      columns: [
        {
          title: '区间',
          dataIndex: 'value_range',
          width: '200px',
        },
        {
          title: '值',
          dataIndex: 'count',
          needTotal: true,
          customRender: (text) => text,
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {},
      loading: false,
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  created() {
    this.resetSearchForm();
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        //that.height = document.body.clientHeight - 357
      })()
    }
  },
  methods: {
    handleSearch() {
      console.log('queryParam:', this.queryParam)
      this.loadBarData()
    },
    // 加载柱状图数据
    loadBarData() {
      var that = this
      if (that.queryParam.startEndDate) {
        that.queryParam.startDate = moment(that.queryParam.startEndDate[0]).format('YYYY-MM-DD')
        that.queryParam.endDate = moment(that.queryParam.startEndDate[1]).format('YYYY-MM-DD')
      } 
      var param = Object.assign({}, that.queryParam)
      param.ranges =  that.queryParam.ranges.split(',')
      that.loading = true
      httpAction('/external/hadoop/resample/ranges', param, 'post')
        .then((res) => {
          if (res.success) {
            var list = []
            that.barData2 = []
            that.lineData = []
            var data = res.result
            that.barData2 = data
            data.forEach((e) => {
              e.item = e['value_range']
            })
            that.dataList = data
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.loading = false
        })
    },
    getValue(soltId, date) {
      var that = this
      var obj = that.dataList.find((item) => item.date == date && item.slot_id == soltId)
      if (obj) {
        return obj[that.queryParam.property].toFixed(2)
      }
      return 0
    },
    handleEdit(record) {
      this.mdl = Object.assign({}, record)
      console.log(this.mdl)
      this.visible = true
    },
    handleOk() {},

    //添加逻辑
    handleModalVisible(isVisible) {
      this.visibleCreateModal = isVisible
    },
    handleCreateModalOk() {
      this.createForm.validateFields((err, fieldsValue) => {
        if (err) {
          return
        }
        const description = this.createForm.getFieldValue('description')
        axios
          .post('/saveRule', {
            desc: description,
          })
          .then((res) => {
            this.createForm.resetFields()
            this.visibleCreateModal = false
            this.loadRuleData()
          })
      })
    },
    handleCreateModalCancel() {
      this.visibleCreateModal = false
    },

    onChange(row) {
      this.selectedRowKeys = row.selectedRowKeys
      this.selectedRows = row.selectedRows

      console.log(this.$refs.table)
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },

    resetSearchForm() {
      var that = this;
      this.queryParam = {
        // workshop: '',
        // property: '',
        startDate: moment(new Date()).format('YYYY-MM') + '-01', //
        endDate: moment(new Date()).format('YYYY-MM-DD'), //
        ranges: '0,100,200,300,500,800',
      } 
      this.$set(that.queryParam, "startEndDate", [that.queryParam.startDate, that.queryParam.endDate]) 
    },
    peopertyChanage(obj){
 
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  },
}
</script>